<!--
 * @Author: your name
 * @Date: 2021-08-11 15:45:47
 * @LastEditTime: 2021-08-17 13:51:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \项目\网易考拉案例\the mask.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人气面膜页面</title>
    <link rel="stylesheet" href="./css/commit.css">
    <link rel="stylesheet" href="./css/index-motherboard.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./fonts/font图标/iconfont.css">
    <link rel="stylesheet" href="./css/mask.css">
</head>

<body>
    <!-- 网易考拉项目的header开始 -->
    <header>
        <!-- header当中的黑色导航栏 -->
        <div class="div-black">
            <nav class="nav-black">
                <!-- 黑色导航栏的左侧标签和链接 -->
                <div class="nav-black-left">
                    <span>考拉欢迎你!</span>
                    <a href="./login.html">登录</a>
                    <a href="./login.html">免费注册</a>
                    <a href="#">手机考拉</a>
                </div>
                <!-- 黑色导航栏的右侧标签和链接 -->
                <ul class="nav-black-right">
                    <li><a href="./daily check-in.html">每日签到</a></li>
                    <li><a href="">我的订单</a></li>
                    <li><a href="./personal  center.html">个人中心</a>

                    </li>
                    <li><a href="#">客户服务</a></li>
                    <li><a href="#">充值中心</a></li>
                    <li><a href="./consumers rights.html">消费者权益</a></li>
                    <li><a href="#">更多</a></li>
                    <li><a href="#">视频内容</a></li>
                </ul>
            </nav>
        </div>
        <!-- header中的第二个盒子的设置，主要是logo和搜索栏 -->
        <div class="box w">
            <div class="box-logo">
                <a href="#"><img src="./images/网易考拉logo.png" alt="网易考拉logo"></a>
            </div>
            <div class="box-search">
                <input type="text" placeholder="口红">
                <button><i class="iconfont icon-ai219"></i></button>
            </div>
            <div class="box-shopping-car">
                <button><i class="iconfont icon-gouwuche1"></i> 购物车</button>
            </div>
        </div>
        <!-- header中的第二个盒子结束了 -->
        <div class="nav-red">
            <div class="nav-red-one">
                <i class="iconfont icon-ziyuan114"></i>
                <p> 所有分类
                    <ul class="menu">
                        <li><i class="iconfont icon-xiangshui"></i>
                            <a href="#">美容美妆</a>
                        </li>
                        <li><i class="iconfont icon-gouwuche"></i>
                            <a href="#">母婴儿童</a>
                        </li>
                        <li><i class="iconfont icon-changyongicon-"></i>
                            <a href="#">营养保健</a>
                        </li>
                        <li><i class="iconfont icon-xiangji"></i>
                            <a href="#">数码家电</a>
                        </li>
                        <li><i class="iconfont icon-qingjie1-copy"></i>
                            <a href="#">个护家清</a>
                        </li>
                        <li><i class="iconfont icon-yijia"></i>
                            <a href="#">服饰鞋靴</a>
                        </li>
                        <li><i class="iconfont icon-zhinanzhendaohang"></i>
                            <a href="#">运动户外</a>
                        </li>
                        <li><i class="iconfont icon-shizhong"></i>
                            <a href="#">手表配饰</a>
                        </li>
                        <li><i class="iconfont icon-bao"></i>
                            <a href="#">轻奢</a>
                        </li>
                        <li><i class="iconfont icon-shafa"></i>
                            <a href="#">家具生活</a>
                        </li>
                        <li><i class="iconfont icon-hanbao"></i>
                            <a href="#">环球美食</a>
                        </li>
                        <li><i class="iconfont icon-chongwutubiao04"></i>
                            <a href="#">宠物生活</a>
                        </li>
                    </ul>
                </p>
            </div>
            <div class="nav-red-two">
                <ul>
                    <li><a href="./index.html">首页</a></li>
                    <li><a href="./oversea.html">海外直购</a></li>
                    <li><a href="./purchased product.html">考拉海购出品</a></li>
                    <li><a href="./milk powder.html">品质奶粉</a></li>
                    <li><a href="./the mask.html" style="color: #ff0e20;">人气面膜</a></li>
                    <li><a href="./recharge.html">充值</a></li>
                </ul>
            </div>
        </div>
    </header>
    <!-- section内容开始 -->
    <hr class="hr1">
    <!-- 第一个大盒子样式 -->
    <div class="d1">
        <!-- 第一张图片样式 -->
        <div class="one">
            <div class="div1">
                <img src="./images/popularity/1.jpg" alt="" class="img1" title="JMsolution">
                <img src="./images/popularity/1.1.jpg" alt="" class="img2" title="JMsolution">
                <p class=p1 title="JMsolution"> JMsolution</p>
                <p class=p2 title="JMsolution">打造健康肌肤></p>
            </div>
            <!-- 第二张图片样式 -->
            <div class="div2">
                <img src="./images/popularity/2.jpg" alt="" class="img1" title="Papa recipe 爸爸的礼物">
                <img src="./images/popularity/2.1.jpg" alt="" class="img2" title="Papa recipe 爸爸的礼物">
                <p class=p3 title="Papa recipe 爸爸的礼物"> Papa recipe 爸爸的礼物</p>
                <p class=p4 title="Papa recipe 爸爸的礼物">爸爸的无添加爱心护肤配方></p>
            </div>
            <!-- 第三张图片样式 -->
            <div class="div2">
                <img src="./images/popularity/3.jpg" alt="" class="img1" title="MEDIHEAL 美迪惠尔">
                <img src="./images/popularity/3.1.jpg" alt="" class="img2" title="MEDIHEAL 美迪惠尔">
                <p class=p5 title="MEDIHEAL 美迪惠尔">MEDIHEAL 美迪惠尔 </p>
                <p class=p6 title="MEDIHEAL 美迪惠尔">韩国针剂面膜超人气品牌> </p>
            </div>
            <!-- 第四张图片样式 -->
            <div class="div3">
                <img src="./images/popularity/4.jpg" alt="" class="img1" title="SHANGPREE 香蒲丽">
                <img src="./images/popularity/4.1.jpg" alt="" class="img2" title="SHANGPREE 香蒲丽">
                <p class=p5 title="SHANGPREE 香蒲丽">SHANGPREE 香蒲丽</p>
                <p class=p6 title="SHANGPREE 香蒲丽">韩国SPA类美容护肤品牌></p>
            </div>
            <!-- 第五张图片样式 -->
            <div class="div1">
                <img src="./images/popularity/5.jpg" alt="" class="img1" title="It'S SKIN伊思">
                <img src="./images/popularity/5.1.jpg" alt="" class="img2" title="It'S SKIN伊思">
                <p class=p7 title="It'S SKIN伊思">It'S SKIN伊思</p>
                <p class=p8 title="It'S SKIN伊思">韩国品牌先锋></p>
            </div>
            <!-- 第六张图片样式 -->
            <div class="div2">
                <img src="./images/popularity/6.jpg" alt="" class="img1">
                <img src="./images/popularity/6.1.jpg" alt="" class="img2">
                <p class=p9 title="utena 佑天兰">utena 佑天兰</p>
                <p class=p8 title="utena 佑天兰">追求人类的自然美></p>
            </div>
            <!-- 第七张图片样式 -->
            <div class="div2">
                <img src="./images/popularity/7.jpg" alt="" class="img1" title="Spa treament">
                <img src="./images/popularity/7.1.jpg" alt="" class="img2" title="Spa treament">
                <p class=p10 title="Spa treament">Spa treament</p>
                <p class=p6 title="Spa treament">结合顶端生物科技护肤></p>
            </div>
            <!-- 第八张图片内容 -->
            <div class="div3">
                <img src="./images/popularity/8.jpg" alt="" class="img1">
                <img src="./images/popularity/8.1.jpg" alt="" class="img2">
                <p class=p11 title="Dr.Jart+">Dr.Jart+</p>
                <p class=p8 title="Dr.Jart+">韩国人气品牌></p>
            </div>
        </div>
        <!-- 第二个大盒子内容开始 -->

        <div class="two">
            <div>
                <!-- 第一张图片内容 -->
                <div class=div4>
                    <img src="./images/popularity/9.jpg" alt="" class=img3>
                    <p class="j1">【日本直购】3件...</p>
                    <span class="span1">￥</span><span class="span2">164</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong"><span class="span3" >￥</span><span class="span4">155</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">

                </div>
                <!-- 第二张图片内容 -->
                <div class=div5>
                    <img src="./images/popularity/10.jpg" alt="" class=img3>
                    <p class="j1">【日本直购】miKi...</p>
                    <span class="span1">￥</span><span class="span2">520</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong1"><span class="span3" >￥</span><span class="span5">489</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">
                </div>
                <!-- 第三张图片内容 -->
                <div class=div5>
                    <img src="./images/popularity/11.jpg" alt="" class=img3>
                    <p class="j1">【欧洲直购】Kieh...</p>
                    <span class="span1">￥</span><span class="span2">405</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong1"><span class="span3" >￥</span><span class="span5">375</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">

                </div>
                <!-- 第四张图片内容 -->
                <div class=div5>
                    <img src="./images/popularity/12.jpg" alt="" class=img3>
                    <p class="j1">【日本直购】Kieh...</p>
                    <span class="span1">￥</span><span class="span2">109</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong1"><span class="span3" >￥</span><span class="span5">103</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">
                </div>
                <!-- 第五张图片内容 -->
                <div class=div6>
                    <img src="./images/popularity/13.jpg" alt="" class=img3>
                    <p class="j1">【美国直购】Phil...</p>
                    <span class="span1">￥</span><span class="span2">226</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong2"><span class="span3" >￥</span><span class="span6">222</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">
                </div>
                <!-- 第六张图片内容 -->
                <div class=div4>
                    <img src="./images/popularity/14.jpg" alt="" class=img3>
                    <p class="j1">【欧洲直购】ZIA...</p>
                    <span class="span1">￥</span><span class="span2">85</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong"><span class="span3" >￥</span><span class="span4">75</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">
                </div>
                <!-- 第七张图片内容 -->
                <div class=div5>
                    <img src="./images/popularity/16.jpg" alt="" class=img3>
                    <p class="j1">【欧洲直购】EST...</p>
                    <span class="span1">￥</span><span class="span2">605</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong1"><span class="span3" >￥</span><span class="span5">565</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">
                </div>
                <!-- 第八张图片内容 -->
                <div class=div5>
                    <img src="./images/popularity/17.jpg" alt="" class=img3>
                    <p class="j1">【新老版本交替发】</p>
                    <span class="span1">￥</span><span class="span2">229</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong1"><span class="span3" >￥</span><span class="span5">219</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">
                </div>
                <!-- 第九张图片内容 -->
                <div class=div5>
                    <img src="./images/popularity/18.jpg" alt="" class=img3>
                    <p class="j1">SHISEIDO 资深堂...</p>
                    <span class="span1">￥</span><span class="span2">399</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong1"><span class="span3" >￥</span><span class="span5">359</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">
                </div>
                <!-- 第十张图片内容 -->
                <div class=div6>
                    <img src="./images/popularity/15.jpg" alt="" class=img3>
                    <p class="j1">【欧洲直购】Ziaja...</p>
                    <span class="span1">￥</span><span class="span2">115</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong2"><span class="span3" >￥</span><span class="span6">99</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">
                </div>
                <!-- 第十一张图片内容 -->
                <div class=div4>
                    <img src="./images/popularity/19.webp" alt="" class=img3>
                    <p class="j1">【日本直购】3件...</p>
                    <span class="span1">￥</span><span class="span2">164</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong"><span class="span3" >￥</span><span class="span4">155</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">

                </div>
                <!-- 第十二张图片内容 -->
                <div class=div5>
                    <img src="./images/popularity/20.webp" alt="" class=img3>
                    <p class="j1">【日本直购】miKi...</p>
                    <span class="span1">￥</span><span class="span2">520</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong1"><span class="span3" >￥</span><span class="span5">489</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">

                </div>
                <!-- 第十三张图片内容 -->
                <div class=div5>
                    <img src="./images/popularity/21.webp" alt="" class=img3>
                    <p class="j1">【日本直购】miKi...</p>
                    <span class="span1">￥</span><span class="span2">520</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong1"><span class="span3" >￥</span><span class="span5">489</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">

                </div>
                <!-- 第十四张图片内容 -->
                <div class=div5>
                    <img src="./images/popularity/22.webp" alt="" class=img3>
                    <p class="j1">【日本直购】miKi...</p>
                    <span class="span1">￥</span><span class="span2">520</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong1"><span class="span3" >￥</span><span class="span5">489</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">

                </div>
                <!-- 第十五张图片内容 -->
                <div class=div6>
                    <img src="./images/popularity/24.webp" alt="" class=img3>
                    <p class="j1">【欧洲直购】Ziaja...</p>
                    <span class="span1">￥</span><span class="span2">115</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong2"><span class="span3" >￥</span><span class="span6">99</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">
                </div>
                <!-- 从这开始重复图片 -->
                <div class=div4>
                    <img src="./images/popularity/19.webp" alt="" class=img3>
                    <p class="j1">【日本直购】3件...</p>
                    <span class="span1">￥</span><span class="span2">164</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong"><span class="span3" >￥</span><span class="span4">155</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">

                </div>
                <div class=div5>
                    <img src="./images/popularity/10.jpg" alt="" class=img3>
                    <p class="j1">【日本直购】miKi...</p>
                    <span class="span1">￥</span><span class="span2">520</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong1"><span class="span3" >￥</span><span class="span5">489</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">

                </div>
                <div class=div5>
                    <img src="./images/popularity/11.jpg" alt="" class=img3>
                    <p class="j1">【欧洲直购】Kieh...</p>
                    <span class="span1">￥</span><span class="span2">405</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong1"><span class="span3" >￥</span><span class="span5">375</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">

                </div>
                <div class=div5>
                    <img src="./images/popularity/18.jpg" alt="" class=img3>
                    <p class="j1">SHISEIDO 资深堂...</p>
                    <span class="span1">￥</span><span class="span2">399</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong1"><span class="span3" >￥</span><span class="span5">359</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">
                </div>
                <div class=div6>
                    <img src="./images/popularity/13.jpg" alt="" class=img3>
                    <p class="j1">【美国直购】Phil...</p>
                    <span class="span1">￥</span><span class="span2">226</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong2"><span class="span3" >￥</span><span class="span6">222</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">
                </div>
                <div class=div4>
                    <img src="./images/popularity/19.webp" alt="" class=img3>
                    <p class="j1">【日本直购】3件...</p>
                    <span class="span1">￥</span><span class="span2">164</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong"><span class="span3" >￥</span><span class="span4">155</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">

                </div>
                <div class=div5>
                    <img src="./images/popularity/17.jpg" alt="" class=img3>
                    <p class="j1">【新老版本交替发】</p>
                    <span class="span1">￥</span><span class="span2">229</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong1"><span class="span3" >￥</span><span class="span5">219</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">
                </div>
                <div class=div5>
                    <img src="./images/popularity/20.webp" alt="" class=img3>
                    <p class="j1">【日本直购】miKi...</p>
                    <span class="span1">￥</span><span class="span2">520</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong1"><span class="span3" >￥</span><span class="span5">489</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">

                </div>
                <div class=div5>
                    <img src="./images/popularity/12.jpg" alt="" class=img3>
                    <p class="j1">【日本直购】Kieh...</p>
                    <span class="span1">￥</span><span class="span2">109</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong1"><span class="span3" >￥</span><span class="span5">103</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">
                </div>
                <div class=div6>
                    <img src="./images/popularity/24.webp" alt="" class=img3>
                    <p class="j1">【欧洲直购】Ziaja...</p>
                    <span class="span1">￥</span><span class="span2">115</span>
                    <br>
                    <img src="./images/popularity/黑卡.png" alt="" class="heika">
                    <span class="zong2"><span class="span3" >￥</span><span class="span6">99</span></span>
                    <img src="./images/popularity/购物车.png" alt="" class="car">
                </div>
            </div>
        </div>
    </div>

    <!-- 尾部 -->
    <div class="footer">
        <div class="a1">
            <div>
                <i class="iconfont icon-zheng1"></i>
                <p>正品承诺</p>
                <p>正品保障 假一赔十</p>
            </div>
            <div>
                <i class="iconfont icon-di"></i>
                <p>低价保障</p>
                <p>缩减中间环节 确保低价</p>
            </div>
            <div>
                <i class="iconfont icon-iconfontzhizuobiaozhun34"></i>
                <p>30天无忧退货</p>
                <p>国内退货 售后无忧</p>
            </div>
            <div>
                <i class="iconfont icon-youjian"></i>
                <p>满88包邮</p>
                <p>部分特殊商品除外</p>
            </div>
        </div>
        <div class="a2">
            <div>
                <img src="./images/网易考拉logo.png" alt="error" />
                <a href="#">关于我们
                    <i class="iconfont icon-weibo"></i>
                <i class="iconfont icon-weixin"></i></a>
                <ul>
                    <li>
                        考拉保障
                        <ul>
                            <li>假一赔十</li>
                            <li>廉政举报</li>
                            <li>&nbsp;</li>
                            <li>&nbsp;</li>
                        </ul>
                    </li>
                    <li>
                        新手指南
                        <ul>
                            <li>购物流程</li>
                            <li>支付方式</li>
                            <li>通关税费</li>
                            <li>常见问题</li>
                        </ul>
                    </li>
                    <li>
                        售后服务
                        <ul>
                            <li>售后政策</li>
                            <li>退货流程</li>
                            <li>特色服务</li>
                            <li>联系客服</li>
                        </ul>
                    </li>
                    <li>
                        物流配送
                        <ul>
                            <li>配送方式</li>
                            <li>配送服务</li>
                            <li>运费标准</li>
                            <li>物流跟踪</li>
                        </ul>
                    </li>
                    <li>
                        商家服务
                        <ul>
                            <li>招商合作</li>
                            <li>销售联盟</li>
                            <li>商家成长</li>
                            <li>&nbsp;</li>
                        </ul>
                    </li>
                    <li>
                        关于我们
                        <ul>
                            <li>联系我们</li>
                            <li>CEO邮箱</li>
                            <li>&nbsp;</li>
                            <li>&nbsp;</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div>
                <img src="./images/popularity/二维码.png" alt="error" />
                <p>扫描下载手机版</p>
            </div>
        </div>
        <div class="a3">
            <img src="./images/popularity/footer.jpg" alt="error" />
        </div>
    </div>
</body>

</html>